<template>
  <div class="echart">
    <div>
      <!-- 类型 -->
      <!-- <div>
        <el-radio-group v-model="radio" size="large">
          <el-radio-button label="sale_">销量</el-radio-button>
          <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>
      </div> -->
      <div>
        <el-select
          v-model="selectVal"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div ref="pie" style="width: 1200px; height: 400px"></div>
  </div>
  <div ref="map" style="width: 1200px; height: 500px"></div>
</template>

<script setup lang="ts">
import * as http from "@/request/api";
import * as echarts from "echarts";
import { nextTick, ref, watch } from "vue";
import type { Ref } from "vue";
import china from "@/assets/china.json";
import { type } from "os";

const radio = ref("sale_");
const selectVal = ref("today");
const option = ref([
  {
    value: "yesterday_money",
    label: "昨天",
  },
  {
    value: "first",
    label: "今天",
  },
  {
    value: "three_days",
    label: "前3天",
  },
  {
    value: "seven_days",
    label: "前7天",
  },
  {
    value: "thirty_days",
    label: "前14天",
  },
]);

type Options = echarts.EChartsOption;
const pie = ref() as Ref<HTMLDivElement>;
const echartData = ref({}) as Ref<IEcharts>;
const map = ref() as Ref<HTMLDivElement>;
var pieChart: echarts.ECharts;
var pieOptions: Options;
// 监听销量,销售额,时间选择器变化 watch: ref, reactive, getter/effect , 数组(ref, reactive, getter/effect)
async function pieEcharts() {
  const res = await http.echart.echart();
  if (res.errno === 0) {
    echartData.value = res.data;
    mapEchart(res.data.saleMap);
    await nextTick();
    if (!pieChart) {
      pieChart = echarts.init(pie.value);
    }
    pieOptions = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        right: "0",
        width: "350",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          width: "350",
          left: "200",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          // label: {
          //   show: false,
          //   position: 'center'
          // },
          emphasis: {
            scaleSize: 10,
            label: {
              show: false,
              fontSize: "60",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: echartData.value.salePie.map((item) => ({
            name: item.name,
            value: +item.sale_today,
          })),
        },
      ],
    };

    pieChart.setOption(pieOptions);
  }
}
pieEcharts();

watch([radio, selectVal], (val) => {
  let str = "";
  if (val[0] === "sale_") {
    str = val[0] + val[1];
  } else {
    str = val[1] + val[0];
  }
  console.log(str);

  if (!pieChart) {
    pieChart = echarts.init(pie.value);
  }
  pieOptions = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      right: "0",
      width: "350",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        width: "350",
        left: "200",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          scaleSize: 10,
          label: {
            show: false,
            fontSize: "60",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: echartData.value.salePie?.map((item) => ({
          name: item.name,
          value: +item[str],
        })),
      },
    ],
  };
  pieChart.setOption(pieOptions);
});

// 地图
var mapOptions: Options;
let mapChart: echarts.ECharts;
echarts.registerMap("china", china as any);
function mapEchart(data: IEcharts["saleMap"]) {
  if (!mapChart) {
    mapChart = echarts.init(map.value);
  }
  mapOptions = {
    visualMap: {
      type: "continuous",
      min: 0,
      max: 1000000,
      calculable: true,
      inRange: {
        color: ["yellow", "rgba(3,4,5,0.4)", "red"],
      },
    },
    tooltip: {
      show: true,
      formatter: "{b0}<br /> 销量: {c0}",
    },
    series: [
      {
        type: "map",
        map: "china",
        zoom: 1.2,
        data: data.map((item) => ({
          name: item.areaName,
          value: item.saleNum,
        })),
      },
    ],
  };
  mapChart.setOption(mapOptions);
}
</script>

<style scoped>
.echart {
  margin-top: 20px;
  border-bottom: 1px solid rgb(232, 229, 229);
  padding: 10px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}
</style>
